<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#main {
				width: 500px;
				height: 650px;
				border: 3px solid #efefef;
				margin: 30px auto;
				position: relative;
			}

			#fireSpace {
				width: 100%;
				height: 400px;
				position: absolute;
				top: 0;
				left: 0;

			}

			#gun {
				display: block;
				width: 60px;
				height: 60px;
				position: absolute;
				bottom: 20px;
				left: 50%;
				transform: translate(-50%, 0);
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="fireSpace">

			</div>
			<img src="./gun.png" id="gun">
		</div>
	</body>
</html>
<script src="./jquery.js"></script>
<script>
	let initX = 0,
		initY = 300,
		initDeg = 90,
		thenDeg, gunX, gunY, boo, x = 0,
		y = 300,
		nx, ny, dg = 90,
		ndg, rdg, isLeft0, isLeft;
	document.getElementById("fireSpace").onmousemove = function(e) {
		if (e.offsetX - 220 >= 0) {
			// nx = e.offsetX - 220;
			// ny = 600-e.offsetY;
			gunX = e.offsetX - 220;
			isLeft = false;
		} else if (e.offsetX - 220 <= 0) {
			gunX = 220 - e.offsetX;
			isLeft = true;
		}
		gunY = 650 - e.offsetY;
		if (e.offsetX - 220 == 0) {
			thenDeg = 90;
		} else {
			thenDeg = gunY - gunX >= 0 ? (90 - Math.asin(gunX / gunY) * 180 / Math.PI) : (Math.asin(gunY / gunX) *
				180 / Math.PI);
			// thenDeg = Math.asin(gunY / gunX) * 180 / Math.PI;
		}
		if (initX - 220 == 0) {
			initDeg = 90;
		} else {
			initDeg = initY - initX >= 0 ? (90 - Math.asin(initX / initY) * 180 / Math.PI) : (Math.asin(initY /
					initX) *
				180 / Math.PI);
		}
		if (initY <= 3) {
			initDeg = 0;
		}
		if (gunY <= 3) {
			thenDeg = 0;
		}
		// if(x<y&&nx<ny){
		// 	dg = 90-Math.asin(Math.abs(x)/y)*180/Math.PI;
		// 	ndg = 90-Math.asin(Math.abs(nx)/ny)*180/Math.PI;
		// 	console.log(dg,ndg);
		// 	if(x<=0&&nx>=0||x<nx<0||nx>x>0){
		// 		rdg = 90-dg-ndg;
		// 	}else{
		// 		rdg = -(90-dg-ndg);
		// 	}
		// 		
		// }
		if (!isLeft0 && isLeft) {
			rdg = -(180 - initDeg - thenDeg);
		} else if (isLeft0 && !isLeft) {
			rdg = 180 - initDeg - thenDeg;
		} else if (isLeft0 && isLeft) {
			rdg = (thenDeg - initDeg)
			// if (thenDeg == 0) {
			// 	if (thenDeg < initDeg) {
			// 		rdg = rdg - 120;
			// 		console.log(rdg);
			// 	} else {
			// 		rdg = rdg + 60;
			// 	}

			// }
		} else if (!isLeft0 && !isLeft) {
			rdg = (initDeg - thenDeg)
			// if (thenDeg == 0) {
			// 	if (initDeg < thenDeg) {
			// 		rdg = rdg + 10;
			// 	} else {
			// 		rdg = rdg - 10;
			// 	}

			// }
		}
		document.getElementById("gun").style.transform = "translate(-50%, 0) rotate(" + rdg + "deg)";
		x = nx;
		y = ny;
		isLeft0 = isLeft;
	}
	let fireX,fireY,iX=0,iY=0
	document.getElementById("fireSpace").onclick = function(e) {
		fireX = e.offsetX;
		fireY = e.offsetY;
		let boll = document.createElement("img");
		boll.style.width = "50px";
		boll.style.height = "50px";
		boll.setAttribute("src", "./boll.png");
		boll.style.position = "absolute";
		boll.style.bottom = "0";
		boll.style.left = "50%";
		boll.style.transform = "translate(-50%,0)";
		boll.style.zIndex = "-1";
		document.getElementById("main").appendChild(boll);
		$(boll).animate({
			top: fireY,
			left: fireX
		}, 5);
		setTimeout(function() {
			boll.parentNode.removeChild(boll);
		}, 60);
	}
</script>
